<script>
	import G6 from '@antv/g6';
	import { onMount } from 'svelte';

	let graph;
	// 加载数据
	// 渲染

	onMount(() => {
		const minimap = new G6.Minimap({
			size: [100, 100],
			className: 'minimap',
			type: 'delegate'
		});
		// 实例化 Image Minimap 插件
		const imageMinimap = new G6.ImageMinimap({
			width: 200,
			graphImg:
				'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*eD7nT6tmYgAAAAAAAAAAAABkARQnAQ'
		});
		graph = new G6.Graph({
			container: 'stardom', // 指定挂载容器
			width: 1000,
			height: 600,
			fitView: true,
			// fitCenter: true,
			animate: true, // Boolean，可选，全局变化时否使用动画过渡
			fitViewPadding: [20, 40, 50, 20],
			plugins: [minimap, imageMinimap],
			modes: {
				default: [
					'drag-canvas',
					'zoom-canvas',
					'drag-node', //'drag-canvas', 允许拖拽画布、放缩画布、拖拽节点
					{
						type: 'tooltip', // 提示框
						formatText(model) {
							// 提示框文本内容
							const text = 'label: ' + model.label + '<br/> class: ' + model.class;
							return text;
						}
					}
				]
			},
			layout: {
				// Object，可选，布局的方法及其配置项，默认为 random 布局。
				linkDistance: 100,
				type: 'force', // 指定为力导向布局
				preventOverlap: true, // 防止节点重叠
				nodeSize: 30 // 节点大小，用于算法中防止节点重叠时的碰撞检测。由于已经在上一节的元素配置中设置了每个节点的 size 属性，则不需要在此设置 nodeSize。
			},
			defaultNode: {
				size: 30,
				labelCfg: {
					style: {
						fill: '#f40'
					}
				}
			},
			defaultEdge: {
				labelCfg: {
					autoRotate: true
				}
			},
			// 节点不同状态下的样式集合
			nodeStateStyles: {
				// 鼠标 hover 上节点，即 hover 状态为 true 时的样式
				hover: {
					fill: 'lightsteelblue'
				},
				// 鼠标点击节点，即 click 状态为 true 时的样式
				click: {
					stroke: '#000',
					lineWidth: 3
				}
			},
			// 边不同状态下的样式集合
			edgeStateStyles: {
				// 鼠标点击边，即 click 状态为 true 时的样式
				click: {
					stroke: 'steelblue'
				}
			}
		});

		main();
	});
	const main = async () => {
		const response = await fetch(
			'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'
		);
		const remoteData = await response.json();
		graph.data(remoteData);
		graph.on('node:mouseenter', (e) => {
			const nodeItem = e.item; // 获取鼠标进入的节点元素对象
			graph.setItemState(nodeItem, 'hover', true); // 设置当前节点的 hover 状态为 true
		});
		// 鼠标离开节点
		graph.on('node:mouseleave', (e) => {
			const nodeItem = e.item; // 获取鼠标离开的节点元素对象
			graph.setItemState(nodeItem, 'hover', false); // 设置当前节点的 hover 状态为 false
		});

		// 点击节点
		graph.on('node:click', (e) => {
			// 先将所有当前是 click 状态的节点置为非 click 状态
			const clickNodes = graph.findAllByState('node', 'click');
			clickNodes.forEach((cn) => {
				graph.setItemState(cn, 'click', false);
			});
			const nodeItem = e.item; // 获取被点击的节点元素对象
			graph.setItemState(nodeItem, 'click', true); // 设置当前节点的 click 状态为 true
		});

		// 点击边
		graph.on('edge:click', (e) => {
			// 先将所有当前是 click 状态的边置为非 click 状态
			const clickEdges = graph.findAllByState('edge', 'click');
			clickEdges.forEach((ce) => {
				graph.setItemState(ce, 'click', false);
			});
			const edgeItem = e.item; // 获取被点击的边元素对象
			graph.setItemState(edgeItem, 'click', true); // 设置当前边的 click 状态为 true
		});
		graph.render();
		imageMinimap.updateGraphImg(img);
	};
</script>

<div id="stardom" />

<style>
	/* 提示框的样式 */
	.g6-tooltip {
		border: 1px solid #e2e2e2;
		border-radius: 4px;
		font-size: 12px;
		color: #545454;
		background-color: rgba(255, 255, 255, 0.9);
		padding: 10px 8px;
		box-shadow: rgb(174, 174, 174) 0px 0px 10px;
	}
</style>
